<template>
	<view class="kjqy">
		<l-echart class="chart" ref="chart" @finished="init"></l-echart>
		<view class="customTooltips" :style="{ left: position[0] + 'px', top: position[1] + 'px' }" v-if="params.length && position.length && showTip">
			<view>这是个自定的tooltips</view>
			<view>{{ params[0]['axisValue'] }}</view>
			<view v-for="(item, index) in params" :key="index">
				<view>
					<text>{{ item.seriesName }}</text>
					<text>{{ item.value }}</text>
				</view>
			</view>
		</view>
		<view class="legend">
			<view class="legend_item" v-for="(item, index) in personType" :key="index">
				<view class="label">
					<view class="icon gx" v-if="item === '高新技术企业'"></view>
					<view class="icon dl" v-if="item === '瞪羚企业'"></view>
					<view class="icon djs" v-if="item === '独角兽企业'"></view>
					<view class="icon kjzxxjs" v-if="item === '科技型中小企业'"></view>
					{{ item }}
				</view>
				<view class="percentage">{{ percentageList[index] }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { listBASIC1 } from '@/api/zhyp/statistics';
import * as echarts from 'echarts'; //4.9.0
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
	components: { LEchart },
	data() {
		return {
			myChart: null,
			personType: [],
			data: [],
			personNum: [],
			percentageList: [],
			sumNum: '',
			chartData: {},
			option: {
					tooltip: {
						trigger: 'item',
						textStyle: {
							textShadowBlur : 0
						},
						renderMode: 'richText',
						position: (point, params, dom, rect, size) => {
							// 假设自定义的tooltips尺寸
							const box = [170, 170];
							// 偏移
							const offsetX = point[0] < size.viewSize[0] / 2 ? 20 : -box[0] - 20;
							const offsetY = point[1] < size.viewSize[1] / 2 ? 20 : -box[1] - 20;
							const x = point[0] + offsetX;
							const y = point[1] + offsetY;

							this.position = [x, y];
							this.params = params;
						},
						formatter:'{b}:\n{c}家'
						// formatter: (params, ticket, callback) => {
						// 	return params.name+':\n'+params.value+'家'
						// }
					},
					// legend: {
					//   top: "5%",
					//   left: "center",
					// },
					color: ['#1563ff', '#34ffbf', '#d0deee', '#66e1df'],
					series: [
						{
							name: '科技企业',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: false,
									fontSize: 40,
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: []
						}
					]
				},
			showTip: false,
			position: [],
			params: [],
			code:'6103'
		};
	},
	async created() {
		await this.getData();
	},
	methods: {
		classFormat(item) {
			if (item === '高新技术企业') {
				return 'gx';
			} else if (item === '瞪羚企业') {
				return 'dl';
			} else if (item === '独角兽企业') {
				return 'djs';
			} else if (item === '科技型中小企业') {
				return 'kjzxxjs';
			}
		},
		async getData() {
			this.data = [];
			this.personType = []
			this.personNum = []
			if (this.code === '6103') {
				const res = await listBASIC1();
				res.rows.forEach((i) => {
					this.personType.push(i.type);
					this.data.push({ name: i.type, value: i.num });
					this.personNum.push(i.num);
				});
				this.sumNum = this.personNum.reduce((a, b) => a + b, 0);
			} else {
				const res = await listBASIC1({ administrativeDivision: this.code });
				res.rows.forEach((i) => {
					this.personType.push(i.type);
					this.data.push({ name: i.type, value: i.num });
					this.personNum.push(i.num);
				});
				this.sumNum = this.personNum.reduce((a, b) => a + b, 0);
			}
			this.percentage();
			this.option.series[0].data = this.data
			this.$refs.chart.setOption(this.option)
		},
		percentage() {
			this.percentageList = []
			this.personNum.map((item) => {
				if (this.sumNum === 0) {
					this.percentageList.push(0);
				} else {
					this.percentageList.push(((item / Math.max(this.sumNum)) * 100).toFixed(2) + '%');
				}
			});
		},
		init() {
			this.$refs.chart.init(echarts, (chart) => {
				setTimeout(() => {
					chart.setOption(this.option);
				}, 500);
				// 监听tooltip显示事件
				chart.on('showTip', (params) => {
					this.showTip = true;
				});
				chart.on('hideTip', (params) => {
					setTimeout(() => {
						this.showTip = false;
					}, 300);
				});
			});
		},
	}
};
</script>

<style lang="scss">
.kjqy {
	margin-top: 16rpx;
	height: 308rpx;
	display: flex;
	.chart {
		height: 100%;
		width: 250rpx;
	}
	.legend {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		.legend_item {
			cursor: pointer;
			font-size: 24rpx;
			height: 48rpx;
			background-color: rgba(18, 128, 151, 0.1);
			padding: 4rpx 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.label {
				display: flex;
				align-items: center;
				color: #d0deee;
				font-size: 24rpx;
				.icon {
					margin-right: 8rpx;
					width: 18rpx;
					height: 18rpx;
					&.gx {
						background-color: #1563ff;
					}
					&.dl {
						background-color: #34ffbf;
					}
					&.djs {
						background-color: #d0deee;
					}
					&.kjzxxjs {
						background-color: #66e1df;
					}
				}
			}
			.percentage {
				color: #d0deee;
				font-size: 28rpx;
				font-weight: 700;
			}
		}
	}
}
</style>
